import React from 'react';
import {Center, Text, View} from "@gluestack-ui/themed";
import {TableContext} from "./context";
import {ColProps} from "./types";

const Col = (props: ColProps) => {
    const {
        columns,
        height = 160,
        children
    } = props;
    const {
        data,
        color,
        fontSize,
        borderColor,
        borderBottomWidth,
        cellDefaultWidth
    } = React.useContext(TableContext);
    return (
        <>
            {columns.map((column, index) => (
                <View
                    w={column.width || cellDefaultWidth}
                    key={index}
                >
                    {
                        data.map((item, i) => (
                            <Center
                                borderBottomWidth={borderBottomWidth}
                                borderColor={borderColor}
                                h={height}
                                key={i}
                            >
                                {column.slot && children
                                    ?
                                    children[column.slot](column, item)
                                    :
                                    <Text
                                        color={color}
                                        bold={true}
                                        style={{fontSize}}
                                    >{item[column.name]}</Text>
                                }
                            </Center>
                        ))
                    }
                </View>
            ))}
        </>
    );
};

export default Col;